<template>
  <div class="address-container">
    <!-- 标题 -->
    <div class="section-title">
      <h3>我的收货地址</h3>
    </div>

    <!-- 默认地址展示 -->
    <el-card class="default-address-card" shadow="never">
      <div class="address-content">
        <div class="address-info">
          <div class="address-field">
            <i class="el-icon-user"></i>
            <span>{{ addressData.consignee }}</span>
          </div>
          <div class="address-field">
            <i class="el-icon-location-outline"></i>
            <span>{{ addressData.addressDetail }}</span>
          </div>
          <div class="address-field">
            <i class="el-icon-phone"></i>
            <span>{{ addressData.phone }}</span>
          </div>
        </div>
        <el-button 
          type="success" 
          icon="el-icon-edit" 
          @click="handleChange"
          class="change-btn">
          更换地址
        </el-button>
      </div>
    </el-card>

    <!-- 地址选择对话框 -->
    <el-dialog 
      title="选择收货地址" 
      :visible.sync="dialogVisible" 
      width="700px"
      :close-on-click-modal="false">
      
      <el-table 
        :data="allAddressData" 
        style="width: 100%"
        @selection-change="handleSelectionChange"
        ref="addressTable">
        <el-table-column 
          type="selection" 
          width="55">
        </el-table-column>
        <el-table-column 
          label="收货人" 
          prop="consignee" 
          width="120">
        </el-table-column>
        <el-table-column 
          label="收货地址" 
          prop="addressDetail">
        </el-table-column>
        <el-table-column 
          label="联系电话" 
          prop="phone" 
          width="150">
        </el-table-column>
      </el-table>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button 
          type="success" 
          @click="submitChange"
          :disabled="!addressData.addressId">
          确认选择
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  selectDefaultByOwnName,
  selectAllAddressByUsername
} from "../api/address";

export default {
  data() {
    return {
      addressData: {},
      allAddressData: [],
      dialogVisible: false
    };
  },
  methods: {
    // 获取所有地址
    getAllAddress() {
      selectAllAddressByUsername()
        .then(res => {
          this.allAddressData = res.data;
        })
        .catch(err => {
          console.error("获取地址列表失败:", err);
          this.$message.error("获取地址列表失败");
        });
    },
    
    // 打开地址选择对话框
    handleChange() {
      this.dialogVisible = true;
    },
    
    // 提交地址变更
    submitChange() {
      if (!this.addressData.addressId) {
        this.$message.warning("请选择一个收货地址");
        return;
      }
      
      this.dialogVisible = false;
      this.$message.success("收货地址已更新");
    },
    
    // 关闭对话框
    handleClose() {
      this.dialogVisible = false;
    },
    
    // 处理表格选择变化
    handleSelectionChange(selection) {
      if (selection.length > 1) {
        // 取消之前的选择
        this.$refs.addressTable.clearSelection();
        // 只保留最新选择的行
        this.$refs.addressTable.toggleRowSelection(selection[selection.length - 1]);
      }
      
      if (selection.length === 1) {
        this.addressData = { ...selection[0] };
      }
    }
  },
  created() {
    // 获取默认地址
    selectDefaultByOwnName({})
      .then(res => {
        this.addressData = res.data;
      })
      .catch(err => {
        console.error("获取默认地址失败:", err);
      });
    
    // 获取所有地址
    this.getAllAddress();
  }
};
</script>

<style lang="less" scoped>
.address-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  
  .section-title {
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 15px;
    margin-bottom: 20px;
    
    h3 {
      margin: 0;
      font-size: 18px;
      color: #303133;
    }
  }
  
  .default-address-card {
    border-radius: 6px;
    border: 1px dashed #c2e7b0;
    background-color: #f8fff5;
    
    .address-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .address-info {
        flex: 1;
        
        .address-field {
          margin-bottom: 10px;
          font-size: 14px;
          color: #606266;
          
          i {
            margin-right: 8px;
            color: #67C23A;
          }
          
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
      
      .change-btn {
        width: 120px;
      }
    }
  }
  
  /deep/ .el-dialog {
    border-radius: 8px;
    
    .el-dialog__header {
      border-bottom: 1px solid #e6e6e6;
    }
    
    .el-dialog__body {
      padding: 20px;
    }
    
    .dialog-footer {
      padding: 10px 20px;
      border-top: 1px solid #e6e6e6;
      text-align: right;
    }
  }
}
</style>